<template>
  <div class="login">
    <div class="setting">
      <van-icon name="setting-o" size="2rem" @click="settingClick" />
    </div>
    <h1 class="title">{{ isLogin ? '欢迎使用智签系统' : '注册' }}</h1>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="name"
          v-if="!isLogin"
          name="name"
          label="姓名"
          placeholder="在这里填写名称"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="number"
          type="number"
          name="number"
          label="工号"
          placeholder="在这里填写工号"
          :rules="[{ required: true, message: '请填写工号' }]"
        />
        <van-field
          v-if="isLogin"
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="在这里填写密码"
          :rules="[{required: true, message: '请填写密码'}]"
        />
        <van-field
          v-else
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="在这里填写密码"
          :rules="[{required: true, message: '请填写密码'},{ validator,  message: '密码必须以字母开头，长度在6-18位，且不弄包含特殊字符' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          {{ isLogin ? '登入' : '注册' }}
        </van-button>
      </div>
      <div class="prompt" @click="toRegister">
        {{ isLogin ? '还没有账号，去注册！' : '已有账号，去登入！' }}
      </div>
    </van-form>
    <van-overlay :show="settingShow" @click="settingShow = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="setting-title">
            <p>后端地址设置</p>
            <van-icon name="cross" class="icon" size="1.5rem" @click="settingShow = false" />
          </div>
          <van-field v-model="settingValue" placeholder="请输入地址" />
          <div class="url">当前后端地址：{{currentUrl}}</div>
          <div class="btns">
            <div class="btn" @click="settingConfirm">确定</div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from 'vue'
import { setStore, getStore } from "@/utils/store";
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { Notify } from 'vant'
import { register } from '@/api/user/login.js'
import { defaultProUrl } from "@/config/env.js"
export default {
  name: 'Login',
  setup() {
    const store = useStore()
    const router = useRouter()

    let settingShow = ref(false)

    let settingValue = ref("")

    const currentUrl = getStore({ name: "proBaseUrl" }) || defaultProUrl

    function settingClick() {
      settingShow.value = true
    }

    function settingConfirm() {
      setStore({ name: "proBaseUrl", content: settingValue.value})
      settingShow.value = false
      location.reload()
    }

    let isLogin = ref(true)

    const validator = (val) => /^[a-zA-Z][a-z|0-9|A-Z|.?!#@&^%*,]{5,17}$/.test(val);

    const userInfo = reactive({
      name: '',
      number: '',
      password: '',
    })

    //
    async function onSubmit(values) {
      if (isLogin.value) {
        // 登入
        store
          .dispatch('Login', values)
          .then(() => {
            router.push('/home')
          })
          .catch((err) => {
            Notify({ type: 'danger', message: err })
          })
      } else {
        // 注册
        const res = await register(userInfo)
        console.log(res)
        if (res.data.code === 400) {
          Notify({ type: 'warning', duration: 1000, message: res.data.message })
          return
        }
        Notify({ type: 'success', duration: 1000, message: "注册成功！" })
        isLogin.value = !isLogin.value
        userInfo.name = ""
        userInfo.number = ""
        userInfo.password = ""
      }
    }

    // 点点击去注册处理函数
    function toRegister() {
      userInfo.name = ""
      userInfo.number = ""
      userInfo.password = ""
      isLogin.value = !isLogin.value
    }

    return {
      ...toRefs(userInfo),
      settingShow,
      currentUrl,
      settingValue,
      onSubmit,
      toRegister,
      validator,
      isLogin,
      settingClick,
      settingConfirm
    }
  },
}
</script>


<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  .setting {
    width: 100%;
    height: 5rem;
    box-sizing: border-box;
    padding-top: 1.5rem;
    padding-left: 90vw;
    // color: var(--blue-color1);
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 30rem;
    min-height: 10rem;
    background-color: #FFFFFF;
    border-radius: 0.8rem;
    box-sizing: border-box;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;

    .setting-title {
      width: 100%;
      height: 3.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--gray-color3);
      box-sizing: border-box;
      padding-bottom: 0.5rem;


      p {
        line-height: 3rem;
        text-align: center;
        height: 100%;
        font-size: 1.6rem;
        flex: 1;
      }

      .icon {
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
      }
    }

    .url {
      width: 100%;
      height: 3.2rem;
      box-sizing: border-box;
      padding: 0 1.5rem;
      color: var(--gray-color2);
    }

    .btn {
      width: 10rem;
      height: 3rem;
      line-height: 3rem;
      text-align: center;
      color: #FFFFFF;
      border-radius: 0.5rem;
      background-color: var(--blue-color1);
    }
  }

  .title {
    margin-bottom: 8rem;
    font-size: 1.8rem;
    font-weight: bold;
  }

  .van-field {
    margin-bottom: 2rem;
  }

  .prompt {
    width: 100%;
    box-sizing: border-box;
    padding: 0 2rem;
    margin-top: 2rem;
    text-align: right;
  }
}
@media screen and (min-width: 700px) {
  .login {
    overflow: auto;
  }
}
</style>